export const addTag = (editor) => {

    const {Components} = editor;

    Components.addType('addTag', {
      model: {
        defaults: {
          name: 'addTag',
          droppable: false,
          attributes: {
              class:'tag-div'
          },
          components: [{
            type: 'text',
            tagName:'div',
            content:'直播状态：',
          },
          {
            tagName:'div',
            attributes:{
              class: 'tag-items'
            },
            components: [
              {
                tagName: 'p',
                type:'text',
                content:'tag1',
              },
              {
                tagName: 'p',
                type:'text',
                content:'tag2',
              }
            ]
          }
        ],
        styles:`
        .tag-div{
            font-family: 微软雅黑;
            font-weight: 400;
            font-style: normal;
            font-size: 15px;
            color: black;
            font-weight: lighter;
            display: flex;
            align-items: center;
        }
        .tag-div p{
            cursor: pointer;
            margin: 0px 3px 0px 3px;
            padding: 5px 25px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: white;
            border-radius: 5px;
            color: rgb(64, 158, 255);
            border: 1px solid rgb(64, 158, 255);
        }
        .tag-div p:hover{
            color: white;
            background-color: rgb(64, 158, 255);
        }
        .tag-div p:active{
            background-color: rgb(57, 139, 222);
        }
        .tag-items{
            display: inline-flex;
        }  
        `,
          script() {
            var thx = document.getElementById(this.attributes.id.value);
          }
        },
        init() {  
        }, 
        removed() {
        },
      },
    })

    // 注册组件
    editor.BlockManager.add('add-tag', {
        label: 'Tag标签',
        category: 'Basic',
        media:`<svg t="1720775724129" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="23780" width="30" height="30"><path d="M791.478857 73.142857c42.349714 0 76.653714 34.377143 76.653714 76.653714v725.065143a73.142857 73.142857 0 0 1-73.142857 73.142857H230.4c-42.422857 0-76.726857-34.304-76.726857-76.653714V149.796571C153.6 107.446857 187.977143 73.142857 230.253714 73.142857z m0 73.142857H230.253714a3.510857 3.510857 0 0 0-3.510857 3.510857L226.669714 351.085714H336.457143a36.571429 36.571429 0 0 1 35.986286 29.988572l0.585142 6.582857v256a36.571429 36.571429 0 0 1-29.988571 35.986286L336.457143 680.228571H226.669714l0.073143 191.122286c0 1.316571 0.731429 2.486857 1.755429 3.072l1.755428 0.438857h564.736V680.228571H687.542857a36.571429 36.571429 0 0 1-35.986286-29.988571L650.971429 643.657143V387.657143a36.571429 36.571429 0 0 1 36.571428-36.571429h107.446857V149.796571a3.510857 3.510857 0 0 0-1.755428-3.072L791.478857 146.285714zM597.357714 351.085714a36.571429 36.571429 0 0 1 36.571429 36.571429v256a36.571429 36.571429 0 0 1-36.571429 36.571428H426.642286a36.571429 36.571429 0 0 1-36.571429-36.571428V387.657143a36.571429 36.571429 0 0 1 36.571429-36.571429zM226.669714 607.085714H299.885714V424.228571H226.669714v182.857143z m334.043429-182.857143H463.213714v182.857143h97.499429V424.228571z m234.276571 0h-70.948571v182.857143h70.948571V424.228571z" p-id="23781"></path></svg>`,
        content: {
          type:'addTag',
        },
    });
};